<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/loading.min.css">
    <link rel="stylesheet" type="text/css" href="./css/swiper-3.4.2.min.css">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <title>Demo</title>
</head>
<body>
    <div id="bg_music">
    </div>
    <!--背景音乐-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <p class="page page1">欢迎观看，请向下滑动
                    <div class="start"><img src="./images/down.png" alt=""></div>
                </p>
            </div>
            <div class="swiper-slide">
                <div id="demo1">
                    <div class="move"><img src="./images/down.png" alt=""></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="demo2">
                    <div class="move"><img src="./images/down.png" alt=""></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="demo3">
                    <div class="move"><img src="./images/down.png" alt=""></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="demo4">
                    <div class="move"><img src="./images/down.png" alt=""></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="demo5">
                    <div class="move"><img src="./images/down.png" alt=""></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="demo6">
                    <div class="move"><img src="./images/down.png" alt=""></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div id="demo7">
                    <div class="move"><img src="./images/down.png" alt=""></div>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/loading.js"></script>
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/swiper-3.4.2.jquery.min.js"></script>
    <script src="./js/bodymovin.min.js"></script>
    <script src="./js/main.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        Pace.on("done", function () {
            $('.page1').fadeIn(1000)
            $('.start').fadeIn()
            $('#bg_music').fadeIn()
            function autoPlayAudio1() {
                $('#bg_music').append('<audio id="m_bg_music" autoplay preload loop controls><source src="./music/bgm.m4a" type="audio/mpeg"><source src="./music/bgm.mp3" type="audio/mpeg"></audio>')
                var audio = document.getElementById('m_bg_music')
                wx.config({
                    debug: false,
                    appId: '',
                    timestamp: 1,
                    nonceStr: '',
                    signature: '',
                    jsApiList: []
                });
                wx.ready(function () {
                    audio.play()
                })
                $('#bg_music').click(function(){
                    event.stopPropagation()
                    if(audio.paused){
                        audio.play(); //播放
                        return;
                    }else{
                        audio.pause(); //暂停
                    }
                })
            }
            autoPlayAudio1()
            
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'vertical',
                grabCursor: true,
                loop: false,
                onSlideChangeEnd: function (swiper) {
                    if (swiper.realIndex === 0) {
                        $('.start').fadeIn()
                        anim1.goToAndStop(0, false)
                        anim2.goToAndStop(0, false)
                        anim3.goToAndStop(0, false)
                        anim4.goToAndStop(0, false)
                        anim5.goToAndStop(0, false)
                        anim6.goToAndStop(0, false)
                        anim7.goToAndStop(0, false)
                    }
                    if (swiper.realIndex === 1) {
                        $('.start').fadeOut()
                        anim1.play()
                        anim2.goToAndStop(0, false)
                        anim3.goToAndStop(0, false)
                        anim4.goToAndStop(0, false)
                        anim5.goToAndStop(0, false)
                        anim6.goToAndStop(0, false)
                        anim7.goToAndStop(0, false)
                    }
                    if (swiper.realIndex === 2) {
                        $('.start').fadeOut()
                        anim2.play()
                        anim1.goToAndStop(0, false)
                        anim3.goToAndStop(0, false)
                        anim4.goToAndStop(0, false)
                        anim5.goToAndStop(0, false)
                        anim6.goToAndStop(0, false)
                        anim7.goToAndStop(0, false)
                    }
                    if (swiper.realIndex === 3) {
                        $('.start').fadeOut()
                        anim3.play()
                        anim1.goToAndStop(0, false)
                        anim2.goToAndStop(0, false)
                        anim4.goToAndStop(0, false)
                        anim5.goToAndStop(0, false)
                        anim6.goToAndStop(0, false)
                        anim7.goToAndStop(0, false)
                    }
                    if (swiper.realIndex === 4) {
                        $('.start').fadeOut()
                        anim4.play()
                        anim1.goToAndStop(0, false)
                        anim2.goToAndStop(0, false)
                        anim3.goToAndStop(0, false)
                        anim5.goToAndStop(0, false)
                        anim6.goToAndStop(0, false)
                        anim7.goToAndStop(0, false)
                    }
                    if (swiper.realIndex === 5) {
                        $('.start').fadeOut()
                        anim5.play()
                        anim1.goToAndStop(0, false)
                        anim2.goToAndStop(0, false)
                        anim3.goToAndStop(0, false)
                        anim4.goToAndStop(0, false)
                        anim6.goToAndStop(0, false)
                        anim7.goToAndStop(0, false)
                    }
                    if (swiper.realIndex === 6) {
                        $('.start').fadeOut()
                        anim6.play()
                        anim1.goToAndStop(0, false)
                        anim2.goToAndStop(0, false)
                        anim3.goToAndStop(0, false)
                        anim4.goToAndStop(0, false)
                        anim5.goToAndStop(0, false)
                        anim7.goToAndStop(0, false)
                    }
                    if (swiper.realIndex === 7) {
                        $('.start').fadeOut()
                        anim7.play()
                        anim1.goToAndStop(0, false)
                        anim2.goToAndStop(0, false)
                        anim3.goToAndStop(0, false)
                        anim4.goToAndStop(0, false)
                        anim5.goToAndStop(0, false)
                        anim6.goToAndStop(0, false)
                    }
                }
            })
        })
    </script>
</body>
</html>